<template>
  <view class="box">
    <!-- 自定义导航栏 -->
    <view class="box1">
      <uv-navbar :fixed="false" bgColor="#f7f8fa">
        <template v-slot:left>
          <view class="uv-nav-slot">
            <uv-icon name="map-fill" size="25" color="#008c8c" @click="openPicker">
            </uv-icon>{{dizhi}}
            <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
          </view>
        </template>
        <template v-slot:center>
          <view class="uv-nav-slot">
            <uv-input placeholder="输入关键字模糊查询" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
              shape="circle" border="none">
            </uv-input>
          </view>
        </template>
      </uv-navbar>
    </view>
    <!-- 轮播 -->
    <view class="box2">
      <uv-swiper :list="list" indicator indicatorMode="dot" circular height="400rpx"></uv-swiper>
    </view>
    <!-- 新人下单有礼 -->
    <view class="box3">
      <view class="box3-top">
        新人下单有礼
        <text class="box3font1">返现奖励</text>
      </view>
      <view class="box3-bottom">
        <view class="box3-bottom1">
          <view>￥5</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第一单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥10</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第二单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
        <view class="box3-bottom1">
          <view>￥15</view>
          <view class="box3-bottom11">
            <uv-icon name="lock-opened-fill" size="20" label="第三单" color="#96979d" labelColor="#96979d"></uv-icon>
          </view>
        </view>
      </view>
    </view>
    <!-- 告示 -->
    <view class="box4">
      <uv-notice-bar :text="text" bgColor="#e7f4f4" color="#008c8c"></uv-notice-bar>
    </view>
    <!-- 宫格 -->
    <view class="box5">
      <uv-grid :col="4">
        <uv-grid-item v-for="(item,index) in baseList" :key="index">
          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="60"></uv-icon>
          <text class="grid-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <!--  -->
    <view class="box6">
      <image src="/static/image/haibao1.png" mode=""></image>
    </view>
    <!--  -->
    <view class="box7">
      <view class="box7-top">
        <view class="box7-top1">
          师傅推荐
        </view>
        <view class="box7-top2">
          更多<uv-icon name="arrow-right" size="18" color="#a6a6a6"></uv-icon>
        </view>
      </view>
      <view class="box7-bottom">
        <view class="bottom-top1" v-for="item in 3">
          <view class="photo">
            <image class="image2" src="/static/image/mein.jpg" mode=""></image>
            <view class="shadow">上次服务</view>
          </view>
          <view class="text1">这是师傅的名称</view>
          <view class="text2">已服务:234次</view>
        </view>
      </view>
    </view>
    <!--  -->
    <view class="box8">
      <uv-grid :col="4">
        <uv-grid-item v-for="(item,index) in baseList" :key="index">
          <uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="60"></uv-icon>
          <text class="grid-text">{{item.title}}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const picker = ref(null)
  const columns = ref([
    ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '滨州', '德州', '聊城', '临沂', '菏泽']
  ])
  const dizhi = ref('济南')
  const list = ref([
    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
  ])
  const text = ref('uv-ui众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用')
  const baseList = ref(
    [{
      name: '/static/image/dingdan.png',
      title: '上门遛狗'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门遛猫'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门洗澡'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门美容'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门剪毛'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门训练'
    }, {
      name: '/static/image/dingdan.png',
      title: '上门医生'
    }, {
      name: '/static/image/dingdan.png',
      title: '更多服务'
    }]
  )

  const openPicker = (() => {
    picker.value.open()
  })
  const confirm = ((e) => {
    console.log('confirm', e.value[0]);
    dizhi.value = e.value[0]
  })
</script>

<style lang="scss">
  @import url("index.scss");
</style>